<template>
  <div id="insertEarlyStage">
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">测绘单位信息</span>
      </div>
      <div class="boxItem_content">
        <div class="boxItem_content_row">
          <div class="boxItem_content_row_item">
            <p>前期测绘单位：</p>
            <p>{{companyName}}</p>
          </div>
          <div class="boxItem_content_row_item">
            <p>前期测绘单位开始时间：</p>
            <p>{{startTime}}</p>
          </div>
        </div>
        <div class>
          <el-row>
            <el-col :span="12">
              <div class="boxItem_content_row_item boxItem_content_row_item_input">
                <p>前期测绘负责人：</p>
                <el-select
                  v-model="fuzerenCehui"
                  filterable
                  clearable
                  @change="changeFuzerenCehui"
                  placeholder="请选择"
                >
                  <!-- <el-select v-model="fuzerenCehui"  placeholder="请选择"> -->
                  <el-option
                    v-for="item in fuzerenCehuiList"
                    :key="item.userId"
                    :label="item.name"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="boxItem_content_row_item boxItem_content_row_item_input">
                <p>前期测绘技术负责人：</p>
                <el-select
                  v-model="fuzerenCehuiJishu"
                  filterable
                  clearable
                  @change="changeFuzerenCehuiJishu"
                  placeholder="请选择"
                >
                  <!-- <el-select v-model="fuzerenCehuiJishu" placeholder="请选择"> -->
                  <el-option
                    v-for="item in fuzerenCehuiJishuList"
                    :key="item.userId"
                    :label="item.name"
                    :value="item.userId"
                  ></el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <div
                v-if="isUnityFuzheren"
                class="boxItem_content_row_item boxItem_content_row_item_input"
              >
                <p>姓名：</p>
                <el-input
                  class="boxItem_content_row_item_input_input"
                  v-model="cehuiRen"
                  placeholder="请输入前期测绘负责人"
                ></el-input>
              </div>
              <div v-else>&emsp;</div>
            </el-col>
            <el-col :span="12">
              <div
                v-if="isJishuFuzheren"
                class="boxItem_content_row_item boxItem_content_row_item_input"
              >
                <p>姓名：</p>
                <el-input
                  class="boxItem_content_row_item_input_input"
                  v-model="jishuRen"
                  placeholder="请输入前期测绘技术负责人"
                ></el-input>
              </div>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <div
                v-if="isUnityFuzheren"
                class="boxItem_content_row_item boxItem_content_row_item_input"
              >
                <p>身份证：</p>
                <el-input
                  class="boxItem_content_row_item_input_input"
                  v-model="cehuiID"
                  placeholder="请输入身份证号"
                ></el-input>
              </div>
              <div v-else>&emsp;</div>
            </el-col>
            <el-col :span="12">
              <div
                v-if="isJishuFuzheren"
                class="boxItem_content_row_item boxItem_content_row_item_input"
              >
                <p>身份证：</p>
                <el-input
                  class="boxItem_content_row_item_input_input"
                  v-model="jishuID"
                  placeholder="请输入身份证号"
                ></el-input>
              </div>
            </el-col>
          </el-row>-->
        </div>
      </div>
    </div>
    <div class="boxItem">
      <div class="boxItem_title">
        <span class="tit">测绘单位信息</span>
      </div>
      <div class="boxItem_content">
        <div class="boxItem_content_row">
          <div class="boxItem_content_row_item uploadDownLoadBox_item">
            <p>前期测绘成果模版</p>
            <el-button @click="downLoad">下载</el-button>
          </div>
        </div>
        <div class="boxItem_content_row">
          <div class="boxItem_content_row_item uploadDownLoadBox_item">
            <p>前期测绘成果</p>
            <div class="upLoadImg">
              <upload @beforeUpload="beforeUpload" @res="getRes" :accept="'.zip'" />
            </div>
          </div>
        </div>
        <div class="uploadResult" v-loading='isResultLoading'>
          <div class="boxItem_content_row">
            <p class="uploadQuestionsTitle" v-if="landFlag=='false'">上传的文件存在问题！</p>
            <el-button style="background: #e65f2e;color:white" @click="exportYiwen">导出系统自动检测意见</el-button>
          </div>
          <div class="boxItem_content_row marginTop20">
            <p>上传结果</p>
            <el-select v-model="resultValue" placeholder="--请选择--" style="margin:0px 20px;">
              <!-- <el-option label="--请选择--" value="0"></el-option> -->
              <el-option label="正常片块" value="true"></el-option>
              <el-option label="疑问片块" value="false"></el-option>
            </el-select>
            <el-button type="primary" @click="getEntryResult">查询</el-button>
          </div>

          <div class="marginTop20">
            <el-table :data="pianKuai" style="width: 100%">
              <el-table-column prop="landName" label="片块名称"></el-table-column>
              <el-table-column prop label="属性信息校验">
                <template slot-scope="scope">
                  <span
                    :class="scope.row.landBaseInfoFlag=='true'?'':'uploadQuestionsTitle'"
                  >{{scope.row.landBaseInfoResult}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="geomResult" label="压盖检测">
                <template slot-scope="scope">
                  <span
                    :class="scope.row.geomFlag=='true'?'':'uploadQuestionsTitle'"
                  >{{scope.row.geomResult}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="statusMapResult" label="现状图">
                <template slot-scope="scope">
                  <span
                    :class="scope.row.statusMapFlag=='true'?'':'uploadQuestionsTitle'"
                  >{{scope.row.statusMapResult}}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pageStyle">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="needInfo.page"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="needInfo.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              ></el-pagination>
            </div>
          </div>
          <div class="marginTop20">
            <div class="title">附件信息</div>
            <el-table :data="xiangMu" border style="width: 100%">
              <el-table-column prop="fileName" label="附件名称"></el-table-column>
              <el-table-column prop label="状态">
                <template slot-scope="scope">
                  <span
                    :class="scope.row.flag=='true'?'':'uploadQuestionsTitle'"
                  >{{scope.row.fileStatus}}</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="boxItem_content_row button_box">
          <el-button
            class="button_box_item"
            v-loading="fullscreenLoading"
            :disabled="noUpload"
            type="primary"
            @click="btnSubmit"
          >下一步</el-button>
          <el-button class="button_box_item">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getList } from "@/api/table";
import {
  getMappingOrganization,
  submit,
  download,
  queryEarlyMappingFile,
  queryEarlyMappingLand,
  earlyMappingResultCommit
} from "@/api/siteSurveyEarlyStage";
import { upImg } from "@/api/upImg";
import upload from "@/components/upload";

export default {
  components: {
    upload
  },
  data() {
    return {
      noUpload: false,
      fullscreenLoading: false,
      pianKuai: [], //片块信息
      xiangMu: [], //项目信息
      errorBoxFlag: false, //上传文件有误弹框控制
      companyName: "", //公司名称
      mainId: "", //公司ID
      fuzerenCehui: "", //测绘负责人
      fuzerenCehuiJishu: "", //测绘技术负责人
      fuzerenCehuiList: [], //测绘负责人数组
      fuzerenCehuiJishuList: [], //测绘负责人数组
      uploadText: "上传",
      fileData: {
        fileName: "",
        fileUrl: "",
        id: ""
      },
      xiangMuData: "",
      startTime: "",

      isResult: false, //上传结果
      resultValue: "", //疑问值

      input: "",
      isUnityFuzheren: true,
      isJishuFuzheren: true,
      cehuiRen: "",
      cehuiID: "",
      jishuRen: "",
      jishuID: "",

      needInfo: {
        page: 1,
        size: 10
      },
      total: 0,

      landFlag: "", //是否显示（导出上传结果）
      fileId:'',//文件id

      isResultLoading:false,

    };
  },
  created() {
    this.getData();
    this.getEntryResult();
    this.getEntryFujian();
  },
  methods: {
    btnSubmit(){//提交（检查）
      let obj={
        projectId: localStorage.getItem("projectId"),
      }
      this.fullscreenLoading=true
      earlyMappingResultCommit(obj).then(res=>{
        this.fullscreenLoading=false
        if(res.code==1000){
          this.$alert('当前流程已完成，请继续下一步', '提示', {
            confirmButtonText: '确定',
            
          });
        }
      }).catch(error=>{
        this.fullscreenLoading=false
      })

    },
    exportYiwen() {
      //导出疑问片块信息
      var a = document.createElement("a");
      a.setAttribute(
        "href",
        this.$https +
          "/pc/file/download?id=" +this.fileId
          
      );
      a.click();
    },
    //上传前
    beforeUpload() {
      this.noUpload = true;
    },
    //上传后
    getRes(res, index) {
      console.log(res);
      this.fileData.fileName = res.data.fileName;
      this.fileData.fileUrl = res.data.filePath;
      this.fileData.id = res.data.id;
      this.noUpload = false;
      this.$message({
        message: "上传成功",
        type: "success"
      });

      this.$nextTick(() => {
        this.submit();
      });
    },
    //关闭弹框
    handleClose() {
      this.errorBoxFlag = false;
    },
    //真实提交
    submit() {
      if(this.fuzerenCehui==''){
        this.$message({
          message: '请选择前期测绘负责人',
          type: 'warning'
        });
        return
      }
      if(this.fuzerenCehuiJishu==''){
        this.$message({
          message: '请选择前期测绘技术负责人',
          type: 'warning'
        });
        return
      }
      var obj = {
        projectId: localStorage.getItem("projectId"),
        zipFileId: this.fileData.id,
        enterpriseId: this.mainId,
        organizationLeaderId: this.fuzerenCehui,
        technologyLeaderId: this.fuzerenCehuiJishu
      };

      console.log(obj, "obj");
      this.isResultLoading = true;
      submit(obj)
        .then(res => {
          this.isResultLoading = false;
          console.log(res);

          this.isResult = true;
          this.$nextTick(() => {
            this.getEntryResult();
            this.getEntryFujian();
          });
        })
        .catch(error => {
          this.isResultLoading = false;
        });
    },
    getEntryResult() {
      //成果录入回显
      let obj = {
        projectId: localStorage.getItem("projectId"),
        page: this.needInfo.page,
        size: this.needInfo.size,
        landFlag: this.resultValue
      };
      console.log(obj, "obj12");
      this.isResultLoading=true
      queryEarlyMappingLand(obj).then(res => {
        this.isResultLoading=false
        this.landFlag = res.data.landFlag;
        this.pianKuai = res.data.pageBean.rows;
        this.total = res.data.pageBean.total;
        this.fileId=res.data.resultFileId
      }).catch(error=>{
        this.isResultLoading=false
      });
    },
    getEntryFujian() {
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      this.isResultLoading=true
      queryEarlyMappingFile(obj).then(res => {
        this.isResultLoading=false
        this.xiangMu = res.data;
      }).catch(error=>{
        this.isResultLoading=false
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.needInfo.size = val;
      this.getEntryResult();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.needInfo.page = val;
      this.getEntryResult();
    },
    //下载本地模板
    downLoad() {
      
      var a = document.createElement("a");
      a.setAttribute("href", this.$https + "/pc/file/download?id=6473")
      a.setAttribute("download", ""); // download属性
      a.click();
      // var data=6473
      // download(data).then(res=>{

      // })
    },

    changeFuzerenCehui() {
      // console.log(this.fuzerenCehui, "单位负责人");
      // if(this.fuzerenCehui=='wcj' || this.fuzerenCehui==''){
      //   this.isUnityFuzheren = true;
      // }else{
      //   this.isUnityFuzheren = false;
      // }
    },
    changeFuzerenCehuiJishu() {
      // console.log(this.fuzerenCehuiJishu, "技术负责人");
      // if(this.fuzerenCehuiJishu=='wcj' || this.fuzerenCehuiJishu==''){
      //   this.isJishuFuzheren = true;
      // }else{
      //   this.isJishuFuzheren = false;
      // }
    },
    getData() {
      var formData = new FormData();
      formData.append("projectId", 30);
      var obj = {
        projectId: localStorage.getItem("projectId")
      };
      getMappingOrganization(obj).then(res => {
        if (res.data.appUserDtoList != null) {
          this.fuzerenCehuiList = res.data.appUserDtoList;
          // this.fuzerenCehuiList.unshift({
          //   userId: "wcj",
          //   name: "未采集"
          // });
          this.fuzerenCehuiJishuList = res.data.appUserDtoList;
          this.mainId = res.data.enterprise.id;
          this.companyName = res.data.enterprise.name;
          this.startTime = res.data.startTime;
        }
        console.log(res);
      });
    }
  }
};
</script>
<style scoped>
#insertEarlyStage {
  padding: 30px;
  box-sizing: border-box;
}
.boxItem {
  width: 100%;
  background-color: #fff;
}
.boxItem_title {
  width: 100%;
  background: #f8f8f8;
  height: 50px;
  border: 1px solid #efefef;
  overflow: hidden;
  font-size: 18px;
  color: #333;
  font-weight: bold;
  text-indent: 20px;
  line-height: 50px;
}
.boxItem_content {
  width: 100%;
  border: 1px solid #ebebeb;
  border-top: none;
  padding: 30px;
  padding-top: 0;
  box-sizing: border-box;
}
.boxItem_content_row {
  display: flex;
  align-items: center;
}
.boxItem_content_row_item {
  display: flex;
  align-items: center;
}
.boxItem_content_row_item {
  margin-right: 30px;
}
.boxItem_content_row_item p {
  font-size: 14px;
  line-height: 36px;
}
.boxItem_content_row_item p:first-child {
  color: #444;
  font-weight: bold;
}
.boxItem_content_row_item p:last-child {
  color: #666;
}
.boxItem_content_row_item_input {
  margin-right: 10.8vw;
}
.boxItem_content_row_item_input p {
  /* width: 150px; */
  margin-right: 20px;
}
.uploadDownLoadBox_item p {
  width: 140px;
}
.button_box {
  margin-top: 30px;
}
.button_box_item {
  margin-right: 10px;
}
.errorBox .el-dialog {
  width: 800px;
}
.title {
  width: 100%;
  height: 50px;
  /* text-align: center; */
  font-weight: bold;
  margin-left: 30px;
  font-size: 16px;
  line-height: 50px;
  border-bottom: none;
  border-top: none;
}
.piankuaixinxi .title1 {
  width: 100%;
  height: 50px;
  text-align: center;
  font-size: 16px;
  line-height: 50px;
  border-bottom: none;
}
.uploadResult {
  font-size: 14px;
}
.uploadQuestionsTitle {
  color: #c40000;
}
.marginTop20 {
  margin-top: 15px;
}
.boxItem_content_row_item_input_input {
  width: 200px;
}
.pageStyle {
  text-align: center;
  margin: 20px;
}
</style>
 